<template>
	<view>
		
		<u-subsection bgColor="#fed940" :list="listOp" :current="currentIndex" @change="upData"></u-subsection>
		
		<view class="container">
				<u-sticky>
					<!-- 只能有一个根元素 -->
					<view class="sticky">
						<u-button @click="handover(0)" size="medium" shape="circle" type="success" v-if="currentIndex==0">开始取件</u-button>
						<u-button @click="handover(0)" size="medium" shape="circle" type="success" v-if="currentIndex==1">开始派件</u-button>
						<u-button size="medium" @click="showRoom=true" shape="circle" type="success">楼栋分类</u-button>
					</view>
				</u-sticky>
		</view>
		<u-table :font-size="32" padding="30rpx 20rpx">
			<u-tr class="u-tr">
				<u-th class="u-th">姓名</u-th>
				<u-th class="u-th">时间</u-th>
				<u-th class="u-th">站点</u-th>
				<u-th class="u-th">楼栋</u-th>
			</u-tr>
		</u-table>
		<view class="tab" v-for="(val,index) in listData" :key="val.id" @click="handover(index)">
			<view class="td"><text>{{val.name}}</text></view>
			<view class="td"><text>{{$u.timeFormat(val.ctime, 'yyyy-mm-dd hh:MM')}}</text></view>
			<view class="td"><text>{{val.express.name}}</text></view>
			<view class="td"><text>{{val.dormitory.room_no}}</text></view>
		</view>
		
		<!--订单详情-->
		<u-popup :closeable="true" v-model="show" mode="bottom" :border-radius="20" @close="close">
			<view class="content">
				<view class="title" style="text-align: center;font-size: 34rpx;font-weight:bolder;"><u-icon name="file-text-fill" size="38"></u-icon>订单详情</view>
				<u-cell-group title="个人信息">
					<u-cell-item icon="account-fill" :icon-size='50' :center='true' title="姓名" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="listData[ordeIndex].name" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
					<u-cell-item icon="phone-fill" :icon-size='50' :center='true' title="电话" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="listData[ordeIndex].mobile" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
					<u-cell-item icon="map-fill" :icon-size='50' :center='true' title="地址" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="listData[ordeIndex].dormitory.room_no+listData[ordeIndex].full_address" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
				</u-cell-group>
				<u-cell-group title="取件信息">
					<u-cell-item icon="car-fill" :icon-size='50' :center='true' title="快递公司" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="listData[ordeIndex].express.name" :value-style="{'font-size':'30rpx'}" :arrow="false"></u-cell-item>
					<u-cell-item icon="chat-fill" :icon-size='50':center="true" title="取件信息" :title-style="{'font-size':'34rpx','font-weight': 'bolder'}" :value="listData[ordeIndex].message" :value-style="{'font-size':'30rpx'}"/>
				</u-cell-group>
				<view style="display: flex; justify-content:space-around;padding: 20rpx 0;">
					<block v-if="currentIndex!=2">
						<u-button v-if="currentIndex==0" size="medium" shape="circle" type="success" @click="pickUp(2)">取件</u-button>
						<u-button v-else size="medium" shape="circle" type="success" @click="pickUp(3)">完成</u-button>
						<u-button size="medium" @click="nextOrde" shape="circle" type="success">下一单</u-button>
					</block>
				</view>
			</view>
		</u-popup>
		<view>
			<u-toast ref="uToast" />
			<u-picker v-model="showRoom" mode="selector" confirm-color="#fed940" :default-selector="[Number.parseInt(roomLsit.length/2)]" :range="roomLsit" range-key="room_no" @confirm="confirm"></u-picker>
			<!--<u-select v-model="showRoom" confirm-color="#fed940" mode="mutil-column" :list="roomLsit" title="选择楼栋" value-name="id" label-name="room_no" @confirm="confirm"></u-select>-->
		</view>
		<u-empty v-if="listData.length==0" text="暂时没有订单" mode="order"></u-empty>
	</view>
</template>

<script>
	import {takeOrde,setPickUp} from "request/orde.js"
	import {getFloorList} from "request/getData.js"
	export default{
		data(){
			return{
				showRoom:false,//快递分类按钮
				show:false,
				currentIndex:0,//待取件
				listOp:[
					{
						name: '待取件'
					}, 
					{
						name: '待派件'
					}, 
					{
						name: '已完成'
					}
				],
				//参数
				parameter:{
					status:1,
					pay_status:2,
					express_id:uni.getStorageSync('express_id'),
					pageSize:5000
				},
				roomLsit:[],
				listData:[],
				ordeIndex:null//切换订单序列
			}
		},
		methods:{
			//修改参数
			upData(index){
				this.currentIndex=index
				this.$set(this.parameter,"status",++index)
				this.getData()
				console.log(this.currentIndex)
			},
			//获取订单
			getData(){
				takeOrde(this.parameter).then(res=>{
					this.listData=res[1].data.data.data
					console.log(res[1].data.data.data)
				})
			},
			
			//切换订单
			handover(index){
				this.ordeIndex=index
				this.show=true
				console.log(this.ordeIndex)
			},
			//弹窗关闭时重新获取数据
			close(){
				console.log('我关闭了')
				this.ordeIndex=0
				this.getData()
			},
			//获取快递列表
			getRoom(){
				getFloorList().then(res=>{
					this.roomLsit=[{id:0,room_no:'全部'},...res[1].data.data]
				})
			},
			//下一单
			nextOrde(){
				if(this.ordeIndex>=this.listData.length-1){
					console.log('没数据了')
					this.$refs.uToast.show({
							title: '没数据了',
							type: 'warning'
					})
					return
				}else{
					this.ordeIndex+=1
				}
			},
			pickUp(type) {
				console.log(this.listData[this.ordeIndex]);
				let id =this.listData[this.ordeIndex].id;
				setPickUp(id,type).then(res =>{
					let rs = res[1].data;
					console.log(rs);
					if(rs.code != 200) {
						this.$refs.uToast.show({
								title: rs.message,
								type: 'warning'
						});
						return false;
					}
					this.$refs.uToast.show({
						title: '操作成功',
						type: 'success'
					})
					this.nextOrde();
				})
			},
			//获取快递分类的ID
			confirm(data){
				if(data[0]==0){
					this.$delete(this.parameter,'dormitory_id')
				}else{
					this.$set(this.parameter,'dormitory_id',this.roomLsit[data[0]].id)
				}
				this.getData()
			}
		},
		onLoad(){
			this.getData()
			this.getRoom()
		}
	}
</script>

<style scoped lang="scss">
	.tab{
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 32prx;
		padding: 30rpx 10rpx;
		border-bottom: 1px solid #DCDFE6;
		view.td{
			flex: 1;
			text{
				font-size: 32rpx;
			}
		}
	}
	.container{
		background-color: #ffff;
		margin: 10rpx 0;
		.sticky{
			background-color: #ffff;
			display: flex;
			justify-content: center;
		}
	}
</style>